iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 14

【Day14】利用Ezyme來跑個小小測試,還有..測試權衡是蝦咪東東 (•ө•)!!?

  • 分享至 

  • xImage
  •  

寫測試時,我們基本需要三樣東西

  • Enzyme
  • Enzyme跟React溝通的適配器(Adapter)
  • 在Enzyme裡,我們要使用的渲染方式 (Shallow)

我們先拿App.test.js來做個小測試,所以打開App.test.js ~

首先 ! 我們要先import上述三樣基本東西

import Enzyme,{shallow} from 'enzyme';
import EnzymeAdapter from '@wojtekmaj/enzyme-adapter-react-17';

接著我們要告訴Enzyme我們要用的適配器是什麼版本的

Enzyme.configure({adapter:new EnzymeAdapter()});

再來,就可以開始寫我們的測試了 ,

我們先來個簡單的 ! 來測試看看我們的App是不是正常渲染出畫面。

首先,用Jest裡的test function來建立一個測試

test('renders App', () => {
 
});

接下來我們就要寫測試的內容了,將我們渲染的App裝在一個常數裡

test('renders learn react link', () => {
  const wrapper= shallow(<App/>);

});

然後就可以在我們的專案目錄下執行 npm test

如果passed,那代表測試跑成功囉!

Shallow 底下有個function => debug() 可以把DOM用文字的方式顯示出來

 wrapper.debug();

測試權衡

  • 前面有提到我們為何要寫測試 => 我們寫測試的目的是為了要測試APP應該要做什麼,而不是APP是怎麼運作的
  • 最好是要達到修改程式後,不用修改測試程式碼的目的。
  • 測試的步驟
    • 設定初始值 (initial state)
    • 模擬動作 (ex: button click之類的)
    • 檢查特定的function是否該被呼叫

下一篇! 我們要來說明前面提到的Enzyme的兩個渲染API,及幾個JEST的function,

還有兩個寫測試的訣竅~撐住啊!!! 下一篇就進入到一半了~


上一篇
【Day13】在Ezyme上裝上相對應版本的適配器(Adapter)吧´・ᴗ・`
下一篇
【Day15】Enzyme的兩個常用渲染API及Jest的幾個API,和..設計測試的幾個要點 (・θ・)
系列文
用Jest和Enzyme來寫React測試吧!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言